<template>
  <a-drawer
    :title="title"
    headerStyle="background-color: #FF943E"
    :maskStyle="{background: 'transparent'}"
    :maskClosable="false"
    :visible="dialog"
    width="500"
    @close="cancel"
  >
    <input type="text" v-model="title" class="change_btn"/>
    <div class="worksheet_trigger_body">
      <div class="worksheet_trigger_form">
        <div class="form_item" v-for="item in schemaInputs" :key="item.id">
          <template v-if="item.customType === 'worksheet'">
            <div class="form_item_title">{{item.title}}</div>
            <a-select v-model="inputs[item.key]" @change="handleSelectWorksheet" optionFilterProp='children' show-search style="width: 100%">
              <a-select-option v-for="item in worksheetList" :key="item.id" :value="item.id">
                {{item.name}}
              </a-select-option>
            </a-select>
          </template>
          <template v-if="inputs.worksheetId && inputs.worksheetId !== '' && item.customType === 'row'">
            <div class="form_item_title">{{item.title}}</div>
            <div v-for="item in fieldList" :key="item.name">
              <workflow-input v-model="formData[item.name]" :field="item" :output="output" v-if="item.dataType === DataType.TEXT || item.dataType === DataType.TEXT_AREA 
              || item.dataType === DataType.RICH_TEXT || item.dataType === DataType.UPLOAD_IMG || item.dataType===DataType.UPLOAD_FILE"></workflow-input>
              <workflow-input-number v-model="formData[item.name]" :field="item" :output="output" v-if="item.dataType === DataType.NUMBER"></workflow-input-number>
              <workflow-selected v-model="formData[item.name]" :field="item" :output="output" v-if="item.dataType === DataType.SELECT || item.dataType === DataType.RADIO"></workflow-selected>
              <workflow-date v-model="formData[item.name]" :field="item" :output="output" v-if="item.dataType === DataType.DATE"></workflow-date>
            </div>
          </template>
          <template v-if="item.customType === 'selectNode'">
            <div class="form_item_title">{{item.title}}</div>
            <a-select v-model="inputs[item.key]" optionFilterProp='children' show-search style="width: 100%">
              <a-select-option v-for="item in output" :key="item.nodeId" :value="item.nodeId">
                {{item.nodeName}}
              </a-select-option>
            </a-select>
          </template>
        </div>
      </div>
      <div class="worksheet_trigger_foot">
        <a-button type="primary" @click="save">
          保存
        </a-button>
        <a-button @click="cancel">
          取消
        </a-button>
      </div>
    </div>
    </a-drawer>
</template>
<script>
import {uuid} from "@/utils/utils"
import {getAllWorksheet} from "@/api/app"
import {getWorksheetDetail} from "@/api/worksheet"
import {getNodeOutput} from "@/api/appWorkflow"
import WorkflowDate from "../../workflowDate.vue"
import WorkflowSelected from "../../workflowSelected.vue"
import WorkflowInput from "../../workflowInput.vue"
import WorkflowInputNumber from "../../workflowInputNumber.vue"
import {DataType} from '@/filterConstant'
export default {
  components: {
    WorkflowInput,
    WorkflowInputNumber,
    WorkflowDate,
    WorkflowSelected
  },
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      default: undefined
    }
  },
  data(){
      return {
        DataType,
        worksheetList: [],
        schemaInputs: [],
        fieldList: [],
        inputs:{},
        formData: {},
        title: ''
      }
  },
  watch: {
    dialog: {
      async handler (val) {
        if(this.dialog){
          this.title = this.node?.name || '添加记录'
          let data = await getAllWorksheet(this.appId)
          this.worksheetList = data
          let schemaInputs = this.node?.schema?.inputs || {}
          this.inputs = this.node?.inputs || {}
          if(this.inputs.worksheetId){
            this.handleSelectWorksheet(this.inputs.worksheetId)
          }
          let output = await getNodeOutput({
            automationId: this.id,
            nodeId: this.node.nodeId
          })
          this.output = output
          this.formData = this.inputs.row || {}
          this.schemaInputs = schemaInputs.order.map(o => {
            for (const key in schemaInputs.properties) {
              if(key === o){
                return {
                  ...schemaInputs.properties[key],
                  id: uuid(),
                  key
                }
              }
            }
          })
        }
      },
      deep: true,
    },
  },
  methods: {
    cancel () {
      this.$emit('close')
    },
    async save(){
      this.inputs.row = this.formData

      this.$emit('close')
      this.$emit('setProperties', {
        inputs: this.inputs
      }, this.title)
    },
    async handleSelectWorksheet(worksheetId){
      let result = await getWorksheetDetail(worksheetId)
      if(result){
            if('config' in result){
                this.fieldList = result.fields;
            }
        }
    }
  },
  computed:{
    appId(){
      return this.$route.params.appId
    },
    id(){
        return this.$route.params.id
    }
  }
}
</script>

<style scoped>
.form_item{
  margin-top: 10px;
  margin-bottom: 20px;
}
.form_item_title{
  /* font-size: 18px; */
  /* font-weight: bold; */
  color: #000000;
  margin: 15px 0 5px 0;
}
.change_btn{
  position: absolute;
  top: 10px;
  left: 15px;
  border: none;
  height: 35px;
  width: 400px;
  font-size: 17px;
  padding-left: 10px;
  background-color: #FF943E;
}
.change_btn:hover{
  background-color: #f5aa6d;
}
.change_btn:focus{
  background-color: white;
}
</style>